<template>
  <div ref="rank" class="rank-demo" />
</template>
<script setup>
// 引入echart和json数据
import * as echarts from 'echarts'
import { onMounted, ref, watch } from 'vue'
import { getPlantingTop } from '@/api/board'

const rank = ref(null)
const farmList = ref([])
const props = defineProps({
  cityName: {
    type: String,
    default: '重庆市'
  },
  year: {
    type: String,
    default: '2023'
  }
})
watch(() => props.cityName, (n, o) => {
  getData()
})
watch(() => props.year, (n, o) => {
  getData()
})

// 设置echart数据
const setOption = () => {
  const dataListold = [
    {
      name: '农场1',
      value: 70,
      color: '#F5AA0F'
    },
    {
      name: '农场2',
      value: 122,
      color: '#B9BECE'
    },
    {
      name: '农场3',
      value: 90,
      color: '#B98188'
    },
    {
      name: '农场4',
      value: 112,
      color: '#01C6A9'
    },
    {
      name: '农场5',
      value: 150,
      color: '#01C6A9'
    },
    {
      name: '农场6',
      value: 20,
      color: '#01C6A9'
    }
  ]
  const dataList = farmList.value.map((item, index) => {
    return {
      name: item.farmName,
      value: item.useMapAreaSize || 0,
      color: dataListold[index].color
    }
  })
  const seriesData = []
  const seriesData1 = []
  const seriesData2 = []
  if (dataList.length > 0) {
    dataList.forEach(item => {
      seriesData.push({
        value: item.value,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: item.color + '90' // 0% 处的颜色
            }, {
              offset: 0.6,
              color: item.color + '60' // 60 % 处的颜色
            }, {
              offset: 1,
              color: item.color + '40' // 100% 处的颜色
            }], false)
          }
        }
      })
      seriesData1.push({
        value: item.value,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: item.color // 0% 处的颜色
            }, {
              offset: 0.6,
              color: item.color + '60' // 60% 处的颜色
            }, {
              offset: 1,
              color: item.color + '40' // 100% 处的颜色
            }], false)
          }
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c}(亩)',
          textStyle: {
            color: item.color,
            fontSize: 10
          }
        }
      })
      seriesData2.push(
        {
          value: item.value,
          itemStyle: {
            borderWidth: 1,
            borderColor: '#0571D5',
            color: item.color, // 控制顶部方形的颜色
          }
        }
      )
    })
  } else {
    seriesData.push(0)
    seriesData1.push(0)
    seriesData2.push(0)
  }
  var myChart = echarts.init(rank.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      show: false
    },
    grid: {
      top: '65',
      bottom: '0%',
      right: '0%',
      left: '0%',
      containLabel: true
    },
    toolbox: {
      show: false,
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: dataList.map((item) => item.name),
        axisLine: {
        // x轴线的颜色以及宽度
          show: true,
          lineStyle: {
            color: '#69BDAA60',
            width: 1,
            type: 'solid',
          },
        },
        axisLabel: {
          show: true,
          color: '#69BDAA',
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#86b7ac50'],
            width: 1,
            type: 'solid'
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
        // x轴线的颜色以及宽度
          show: true,
          lineStyle: {
            color: '#69BDAA60',
            width: 1,
            type: 'solid',
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#86b7ac50'],
            width: 1,
            type: 'dashed'
          }
        },
        axisLabel: {
          show: true,
          color: '#69BDAA',
        },
      }
    ],
    series: [
      {
        name: '使用面积',
        tooltip: {
          show: false
        },
        type: 'bar',
        barWidth: 10,
        data: seriesData,
        barGap: 0,
      },
      {
        name: '使用面积',
        type: 'bar',
        barWidth: 10,
        barGap: 0,
        data: seriesData1,
        label: {
          show: true,
          position: 'top',
          formatter: '{c}亩',
          textStyle: {
            color: 'white',
            fontSize: 10
          }
        }
      },

      {
        name: '使用面积',
        tooltip: {
          show: false
        },
        type: 'pictorialBar',
        symbol: 'path://M 0,0 l 90,0 l -60,60 l -90,0 z',
        symbolSize: ['20', '7'], // 第一个值控制顶部方形大小
        symbolOffset: ['0', '-4'], // 控制顶部放行 左右和上下
        symbolRotate: -16,
        symbolPosition: 'end',
        data: seriesData2,
        z: 3,
      }
    ]
  }

  myChart.setOption(option, true)
}
const getData = () => {
  getPlantingTop({
    province: props.cityName === '全国' ? '' : props.cityName,
    'year': props.year }).then((res) => {
    if (res.code === 0) {
      farmList.value = res.data || []
      if (rank.value) {
        setOption()
      }
    }
  })
}
onMounted(() => {
  getData()
})
</script>
<style lang="scss">
.rank-demo {
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:50%;
    margin-left:-50%;
    z-index:9;
}
</style>
